import React, { useState } from 'react'
import { Card, Switch, Space, Divider } from 'antd'

const products = [
    { title: 'Cabbage', isFruit: false, id: 1 },
    { title: 'Garlic', isFruit: false, id: 2 },
    { title: 'Apple', isFruit: true, id: 3 },
]

const View: React.FC = () => {

    const listItems = products.map(product =>
        <li
            key={product.id}
            style={{
                color: product.isFruit ? 'magenta' : 'darkgreen'
            }}
        >
            {product.title}
        </li>
    )


    return (
        <>
            <Divider orientation="left">渲染列表</Divider>

            <ul>{listItems}</ul>
        </>
    )
}

export default View